import type { InputRef } from 'antd-mobile/es/components/input'
import { useRef, useState } from 'react'
import NavBar from '@/components/Global/NavBar'
import styles from './index.module.less'
import { ExclamationCircleOutline, EyeInvisibleOutline, EyeOutline } from 'antd-mobile-icons'
import { Form, Input, Button, Space, Toast } from 'antd-mobile'
import { SMSCaptcha } from '../index/SMSCaptcha'
import { PWD_HARD_RULES } from '@/utils/RegExps'
import { forgetPasswordApi } from '../api'
import { history } from 'umi'

export default () => {
    const [form] = Form.useForm()
    const [visible, setVisible] = useState(false)
    const [confirmVisible, setConfirmVisible] = useState(false)
    const [captchaVerifyId, setCaptchaVerifyId] = useState<string>()
    const phoneRef = useRef<InputRef>(null)

    const onSubmit = async (values: {
        phone: string
        password: string
        confirm_password: string
        sms_code: string
    }) => {
        await forgetPasswordApi({
            ...values,
            request_id: captchaVerifyId ?? '',
        })
        Toast.show({
            icon: 'success',
            content: '密码重置成功',
        })
        history.replace('/login')
    }

    // 密码二次校验
    const validateConfirmPassword = (_: any, value: string) => {
        if (value && value !== form.getFieldValue('password')) {
            return Promise.reject(new Error('两次输入的密码不一致'))
        }
        return Promise.resolve()
    }

    return (
        <>
            <NavBar title="找回密码" />

            <div className={styles.page}>
                <div className={styles.alert}>
                    <ExclamationCircleOutline />
                    组织机构请联系主管单位找回密码。
                </div>

                <Form
                    form={form}
                    className={styles.form}
                    style={{ '--border-top': 'none', '--border-bottom': 'none' }}
                    onFinish={onSubmit}
                    requiredMarkStyle="text-optional"
                    footer={
                        <Space direction="vertical" className={styles.footer}>
                            <Button
                                block
                                type="submit"
                                color="primary"
                                className={styles.submitBtn}
                            >
                                重置密码
                            </Button>

                            <Button
                                block
                                fill="none"
                                style={{ color: '#1ebead' }}
                                onClick={() => history.replace('/login')}
                            >
                                返回登录
                            </Button>
                        </Space>
                    }
                >
                    <Form.Item name="phone" rules={[{ required: true, message: '请输入手机号' }]}>
                        <Input placeholder="请输入手机号" ref={phoneRef} />
                    </Form.Item>

                    <Form.Item
                        name="sms_code"
                        extra={
                            <SMSCaptcha
                                scene="forget_password"
                                phoneRef={phoneRef}
                                onResultUpdate={result => {
                                    setCaptchaVerifyId(result?.RequestId)
                                }}
                            />
                        }
                    >
                        <Input placeholder="请输入验证码" />
                    </Form.Item>

                    <Form.Item
                        name="password"
                        rules={[...PWD_HARD_RULES, { required: true, message: '请输入新密码' }]}
                    >
                        <div className={styles.password}>
                            <Input
                                className={styles.input}
                                placeholder="请输入新密码"
                                type={visible ? 'text' : 'password'}
                            />

                            <div className={styles.eye}>
                                {!visible ? (
                                    <EyeInvisibleOutline onClick={() => setVisible(true)} />
                                ) : (
                                    <EyeOutline onClick={() => setVisible(false)} />
                                )}
                            </div>
                        </div>
                    </Form.Item>

                    <Form.Item
                        name="confirm_password"
                        rules={[
                            ...PWD_HARD_RULES,
                            { required: true, message: '请再次输入新密码' },
                            { validator: validateConfirmPassword },
                        ]}
                    >
                        <div className={styles.password}>
                            <Input
                                className={styles.input}
                                placeholder="请再次输入新密码"
                                type={confirmVisible ? 'text' : 'password'}
                            />

                            <div className={styles.eye}>
                                {!confirmVisible ? (
                                    <EyeInvisibleOutline onClick={() => setConfirmVisible(true)} />
                                ) : (
                                    <EyeOutline onClick={() => setConfirmVisible(false)} />
                                )}
                            </div>
                        </div>
                    </Form.Item>
                </Form>
            </div>
        </>
    )
}
